<template>
    <div class="project-view">
        <page-header pageTitle="管理项目" :hasBackBtn="false"></page-header>
        <el-button type="primary" plain @click="addProject">
            <span class="content fa fa-plus fa-2x"></span>
        </el-button>
        <el-row class="project-view-content">
            <el-col v-for="(project, index) in projects" :key="index" class="project-box">
                <el-card class="project-card">
                    <el-row class="content">
                        <el-col :span="14">
                            <div>{{project.name}}</div>
                            <div>{{project.desc}}</div>
                        </el-col>
                        <el-col :span="10" class="btn-group">
                            <el-button icon="el-icon-s-tools" type="primary"
                                       plain circle size="mini"
                                       @click="toProjectDetail(project.id)"></el-button>
                            <el-button icon="el-icon-close" type="danger"
                                       plain size="mini" circle
                                        @click="deleteProject(project.id)"></el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        name: 'Project',
        components: {
            PageHeader: () => import("@/views/common/PageHeader.vue")
        },
        data() {
            return {
                projects: [
                    /*{
                    id: '',
                    name: '项目1',
                    desc: '地铁项目',
                    status: 1,
                }*/
                    ]
            }
        },
        created: function() {
            this.loadProjectList();
        },
        methods: {
            loadProjectList: function() {
                let self = this;
                let url = '/api/project/get_list';
                this.$http.post(url, {}).then(res => {
                    self.projects = res.data.projects;
                }).catch(err => {
                    console.log(err);
                });
            },
            toProjectDetail: function (id) {
                this.$router.push({
                    name: "project-detail", query: {
                        projectId: id
                    }
                });
            },
            addProject: function () {
                this.$router.push({name: "add-project-first-step"});
            },
            deleteProject: function(projectId) {
                let self = this;
                let url = '/api/project/delete';
                this.$http.post(url, {ids: projectId}).then(res => {
                    self.loadProjectList();
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .project-view {
        width: 100%;

        .project-view-content {
            margin: 0.1rem 0.2rem;
            overflow: auto;

            .project-box {
                margin: 0.1rem;
                width: 2.2rem;
                height: 1.2rem;
                text-align: center;
                border-radius: 0.1rem;

                .project-card {
                    width: 2rem;
                    height: 1rem;
                    text-align: left;
                }
                .content {
                    height: 100%;

                    .btn-group {
                        display: flex;
                        flex-direction: row;
                    }
                }
            }
        }
    }
</style>
